/* Message List */
// a.k.a. notifications in the menu

.message-list {
  width: if($compact == 'true', 25.5em, 29em);
  text-shadow: none;
  border: solid $border;
  padding: 0;

  // padding and margins to account for scrollbar
  &:ltr { margin-left: 0; margin-right: $base_margin * 2; padding-right: 0; border-right-width: 1px; }
  &:rtl { margin-right: 0; margin-left: $base_margin * 2; padding-left: 0; border-left-width: 1px; }

  .message-list-placeholder {
    @extend %title_2;
    spacing: $base_spacing * 2;
    color: $text-secondary-disabled;

    // icon size and color
    > StIcon {
      icon-size: 96px; // 48px
      margin-bottom: $base_margin * 3;
      -st-icon-style: symbolic;
    }
  }
}

.message-view {
  // to account for scrollbar
  &:ltr { margin-right: $base_margin * 4; }
  &:rtl { margin-left: $base_margin * 4; }

  -st-vfade-offset: 68px;

  .message {
    margin-bottom: $base_padding * 2 !important;
  }
}

// do-not-disturb + clear button
.message-list-controls {
  margin: ($base_margin * 2) ($base_margin * 4) 0;
  // NOTE: remove the padding if notification_bubble could remove margin for drop shadow
  padding: $base_padding;
  spacing: $base_padding;
  @extend %heading;

  .dnd-button {
    // We need this because the focus outline isn't inset like for the buttons
    // so the dnd button would grow when it gets focus if we didn't change only
    // its color when focusing.
    border-width: 2px;
    border-color: transparent;
    border-radius: 32px;
    border-style: solid;

    &:focus {
      border-color: transparentize($primary, 0.4);
    }
  }
}

// message notification group
.message-notification-group {
  spacing: $base_padding * 2;

  .message-group-header {
    padding: $base_padding;
    .message-group-title {
      @extend %title_2;
      margin: 0 $base_margin;
    }
  }

  // close button
  .message-collapse-button {
    @extend .icon-button;
    color: $text;
    background-color: transparentize($text, 0.8);
    padding: 4px !important;
    border: 4px transparent solid;
    &:hover {background-color: transparentize($text, 0.7);}
    &:active {background-color: transparentize($text, 0.8);}
  }
}

$bubble-solid: if($variant == 'light', mix(black, $popover, 5%), mix(white, $popover, 6%));

%solid_bubble {
  color: $text-secondary;
  background-color: $bubble-solid;
  border-radius: $base_radius;
  border: none;
  box-shadow: none;
  text-shadow: none;
  padding: $base_padding $base_padding * 1.5;

  &:hover, &:focus {
    color: $text;
    background-color: solid_on($bubble-solid, hover);
    box-shadow: none;
  }

  &:active {
    color: $text;
    background-color: solid_on($bubble-solid, active);
    box-shadow: none;
  }
}

// message bubbles
.message {
  padding: $base_padding;
  margin: $base_spacing / 2;
  border-radius: $window_radius;
  border: none;

  @if $colorful == 'true' {
    @include theme_bubble($theme_purple_color);
  }

  .popup-menu & {
    border-radius: $base_radius;

    @if $colorful == 'true' {
      @include theme_bubble($theme_purple_color);
    } @else {
      @extend %solid_bubble;
    }
  }

  &:second-in-stack {
    background-color: if($variant == 'light', darken($bubble-solid, 3%), darken($bubble-solid, 2%));
    box-shadow: none;
  }

  &:lower-in-stack {
    background-color: if($variant == 'light', darken($bubble-solid, 6%), darken($bubble-solid, 4%));
    box-shadow: none;
  }

  // message header
  .message-header {
    padding: 0 $base_padding;
    spacing: $base_padding;

    // remove side padding to accommodate the close button
    &:ltr { padding-right: 0; }
    &:rtl { padding-left: 0; }

    @if $colorful == 'true' {
      color: on($theme_purple_color, disabled);
    } @else {
      color: $text-disabled;
    }

    // header source icon
    .message-source-icon {
      icon-size: $scalable_icon_size; // 16px
      -st-icon-style: symbolic;
    }

    // box that contains the source icon, source name and timestamp of the message
    .message-header-content {
      spacing: $base_padding;
      min-height: to_em(24px);
      padding-bottom: $base_padding;

      // header source title
      .message-source-title {
        font-weight: bold;
      }

      // Time label
      .event-time {
        @extend %caption;
        // Add bottom padding to align the app name with the time horizontally
        padding-bottom: to_em(1px);

        @if $colorful == 'true' {
          color: on($theme_purple_color, disabled);
        } @else {
          color: $text-disabled;
        }

        &:ltr { text-align: right; }
        &:rtl { text-align: left; }
      }
    }

    // buttons in the message header
    .message-expand-button,
    .message-close-button {
      @extend .icon-button;
      color: $text;
      background-color: $fill;
      padding: 4px;
      border: none;

      &, &:hover, &:active {
        @if $colorful == 'true' {
          color: on($theme_purple_color);
        } @else {
          color: $text;
        }
      }
  
      &:hover, &:focus { background-color: $divider; }
      &:active, &:active:hover { background-color: $track; }
      &:insensitive { background-color: $fill;}
    }

    .message-expand-button {
      padding: 4px;
      border: none;

      &:ltr { margin-right: $base_padding; }
      &:rtl { margin-left: $base_padding; }
    }
  }

  // container for message contents
  .message-box {
    padding: $base_padding;
    margin: $base_padding;
    margin-top: 0;
    spacing: $base_padding;

    // icon of the message
    .message-icon {
      &:ltr { margin-right: $base_padding; }
      &:rtl { margin-left: $base_padding; }

      // icon size and color
      icon-size: $base_icon_size * 3; // 48px
      -st-icon-style: symbolic;

      &.message-themed-icon {
        border-radius: $circular_radius; // is circular
        icon-size: $base_icon_size;
        min-width: $base_icon_size * 3;
        min-height: $base_icon_size * 3;

        @if $colorful == 'true' {
          color: on($theme_purple_color, disabled);
          background-color: on($theme_purple_color, divider);
        } @else {
          color: $text-disabled;
          background-color: $divider;
        }
      }
    }

    // If the header isn't displayed we need more top margin
    &:first-child {
      margin-top: $base_padding * 2;
    }

    // text of the message
    .message-content {
      spacing: $base_margin;

      // message title
      .message-title {
        font-weight: bold;
      }
    }
  }
}

// URLs in messages
.url-highlighter {
  link-color: $link;
}

.message-media-control {
  margin: 4px $base_padding;
  padding: $base_padding * 2;
  border-radius: $circular_radius;
  border: none;

  @if $colorful == 'true' {
    color: on($theme_purple_color, secondary);
  } @else {
    color: $text-secondary;
  }

  &:hover, &:focus { background-color: $divider; }
  &:active { background-color: $track; }

  &:hover, &:focus, &:active {
    @if $colorful == 'true' {
      color: on($theme_purple_color);
    } @else {
      color: $text;
    }
  }

  &:insensitive {
    @if $colorful == 'true' {
      color: on($theme_green_color, disabled);
    } @else {
      color: $text-disabled;
    }
  }

  StIcon { icon-size: $base_icon_size; }
}

.media-message {
  // album-art
  .message-icon {
    border-radius: $base_radius !important;

    &.message-themed-icon {
      icon-size: $large_icon_size !important; // 32px
    }
  }
}
